<template>
    <div>
        <div class="search">
            <el-input v-model.number="sid" placeholder="请输入学生学号" style="width:20%" clearable @clear="handleClear"></el-input>
            <el-button class="searchbtn" type="primary" icon="el-icon-search" @click="getData">查询</el-button>
        </div>

        <el-row :gutter="0" class="chart">
            <el-col :span="12">
            <el-card class="box-card">
                <div id="main" style="width: 800px;height:500px;float: left;"></div>
            </el-card>
            </el-col>
            <el-col :span="12">
            <el-card class="box-card">
                <div id="scatter" style="width: 800px;height:500px;float: right;"></div>
            </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from "echarts"
import { Message } from "element-ui";
import request from "@/utils/re_request"
export default {
    name:'personal',
    data(){
        return {
            sid:'',
            // 学生成绩对象
            data:{},
            // 5个成绩平均分对象
            avg:{},
            // 查询的学生对应的班级所有学生信息
            list:[]
        }
    },
    watch:{
        avg:{
            handler() {
                this.showAverage()
            },
            deep:true,
        },
        list:{
            handler() {
                this.showScatterDiagram()
            },
            deep:true
        }
    },
    methods:{
        getData() {
            if(!Number.isInteger(this.sid)) {
                Message.error('请输入数字值！')
                return 
            }else if(this.sid.toString().length !== 10){
                Message.error('当前学号长度不对，应为10位数字！')
                return
            } else {
                request.get(`/performance/get?sid=${this.sid}`).then(
                    response => {
                        if(response.code === 600) {
                            this.data = response.data
                            // 查询对应教师的平均分对象
                            this.getAverage(response.data.teacher.teacherID)
                            // 查询对应教师的班级学生成绩
                            this.getList(response.data.teacher.teacherID, response.data.sid)
                            // 展示雷达图
                            this.showAverage()
                            // 展示散点图
                            this.showScatterDiagram()
                            Message.success(response.msg)
                        } else {
                            Message.error(response.msg)
                        }
                    }
                )
            }
        },
        // 获取班级平均成绩
        getAverage(tid) {
            request.get(`/performance/avg?tid=${tid}`).then(
                response => {
                    if(response.code === 600) {
                        this.avg = response.data
                    }
                }
            )
        },
        // 展示个人成绩与班级平均成绩
        showAverage() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
            title: {
                text: this.data.name !== undefined ? this.data.name +'同学分数与平均分对比' : ''
            },
            legend: {
                data: ['个人分数', '五育平均分']
            },
            radar: {
                // shape: 'circle',
                indicator: [
                { name: '德育', max: 100 },
                { name: '智育', max: 100 },
                { name: '体育', max: 100 },
                { name: '美育', max: 100 },
                { name: '劳育', max: 100 },
                ],
                center: ["35%", "56%"],//调位置  第一个左右   第二个上下
            },
            series: [
                {
                name: 'Budget vs spending',
                type: 'radar',
                label:{
                    show: true,
                },
                data: [
                    {
                        value: [this.data.virtue,this.data.intelligence,this.data.sports,this.data.art,this.data.labor],
                        name: '个人分数',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,243,51,.8)',
                                lineStyle: {
                                    color: 'rgba(0,243,51,.8)',
                                }
                            },
                        }
                    },
                    {
                        value: [this.avg.virtue,this.avg.intelligence,this.avg.sports,this.avg.art,this.avg.labor],
                        name: '五育平均分',
                        itemStyle: {
                            normal: {
                                color: 'rgba(220,20,60,.8)',
                                lineStyle: {
                                    color: 'rgba(220,20,60,.8)',
                                }
                            },
                        }
                    }
                ]
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)

        },
        handleClear() {
            console.log("点击取消")
            this.data = {}
            this.avg = {}
            this.showAverage()
        },
        // 查询的学生对应的班级除查询学生数据之外所有学生分数总和
        getList(tid, sid) {
            request.get(`/performance/sum?tid=${tid}&sid=${sid}`).then(
                response => {
                    if(response.code === 600) {
                        // 构造散点图所需数据
                        var list = []
                        response.data.map((item) => {
                            var point = []
                            // x
                            point.push(item)
                            // y
                            point.push(item)
                            list.push(point)
                        })
                        this.list = list
                    }
                }
            )
        },
        // 班级各个学生总分与平均分总分
        showScatterDiagram() {
            var chartDom = document.getElementById('scatter');
            var myChart = echarts.init(chartDom);
            var option = {
                color:['red', 'blue', 'green'],
                title: {
                    text:this.data.name !== undefined ? this.data.name +'同学分数、其余同学以及平均总分散点图' : '',
                    left:'40%'
                },
                grid:{
                    x:'40%',
                    y:'20%',
                },
                legend:{
                    orient: 'vertical',
                    right:'5',
                    data:[
                        {
                            name:'其他',
                        },
                        {
                            name:'本人总分',
                            textStyle:{
                                color:'green'
                            }
                        },
                        {
                            name:'平均总分',
                            textStyle:{
                                color:'blue'
                            }
                        },
                    ]
                },
                xAxis: {},
                yAxis: {},
                series: [
                    {
                        name:'其他',
                        symbolSize: 10,
                        data: this.list,
                        type: 'scatter'
                    },
                    {
                        name:'本人总分',
                        symbolSize: 10,
                        data: [
                            {
                                value:[this.data.virtue +  this.data.intelligence + this.data.sports + this.data.art + this.data.labor, 
                            this.data.virtue +  this.data.intelligence + this.data.sports + this.data.art + this.data.labor
                            ],
                            }
                        ],
                        type: 'scatter'
                    },
                    {
                        name:'平均总分',
                        symbolSize: 10,
                        data: [
                        {
                            value:[this.avg.virtue +  this.avg.intelligence + this.avg.sports + this.avg.art + this.avg.labor, 
                            this.avg.virtue +  this.avg.intelligence + this.avg.sports + this.avg.art + this.avg.labor
                            ],
                        }
                        ],
                        type: 'scatter'
                    }
                ],
                tooltip: {  
                    /*返回需要的信息*/  
                    formatter: function(param) {  
                        var show = '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> '
                        if(param.seriesName !== '其他') {
                            show += param.seriesName + ':' + param.value[0]
                        } else {
                            show += param.value[0]
                        }
                        show += '</div>'
                        return show
                    }  
                },
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        }
    },
    mounted(){
        this.showAverage();
        this.showScatterDiagram();
    }
}
</script>

<style>

    .search{
        margin: 20px 50px 0 50px;
    }

    .searchbtn{
        margin-left: 10px;
    }

    .chart{
        margin: 20px 50px 0 50px;
    }

</style>